<style>
  @import url(../templates/bucket.css);

  #toolbar > div {
    display: flex;
  }

  #modelsToolbar {
    align-items: center;
    justify-content: space-between;
  }

  #heightToolbar,
  #lightingToolbar {
    display: flex;
    flex-direction: column;
  }

  #heightToolbar > div,
  #lightingToolbar > div {
    display: flex;
    justify-content: space-between;
  }

  #toolbar input[type="range"] {
    flex-grow: 1;
  }

  #toolbar input[type="number"] {
    max-width: 7ch;
  }

  #toolbar label {
    margin-right: 0.5em;
    flex-shrink: 0;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
  <div id="modelsToolbar">
    <label>Model</label>
  </div>
  <div id="heightToolbar">
    <div>
      <label>Height</label>
      <div>
        <input
          type="range"
          min="0.0"
          max="280000.0"
          step="200"
          data-bind="value: height, valueUpdate: 'input'"
        />
        <input type="number" size="5" step="200" data-bind="value: height" />
      </div>
    </div>
  </div>
  <div id="lightingToolbar">
    <div>
      <label>Directional Light Intensity</label>
      <div>
        <input
          type="range"
          min="0.0"
          max="3.0"
          step="0.5"
          data-bind="value: directionalLightIntensity, valueUpdate: 'input'"
        />
        <input
          type="number"
          size="5"
          step="0.5"
          data-bind="value: directionalLightIntensity"
        />
      </div>
    </div>
    <div>
      <label>Atmospheric Intensity</label>
      <div>
        <input
          type="range"
          min="0.0"
          max="5.0"
          step="0.5"
          data-bind="value: atmosphereScatteringIntensity, valueUpdate: 'input'"
        />
        <input
          type="number"
          size="5"
          step="0.5"
          data-bind="value: atmosphereScatteringIntensity"
        />
      </div>
    </div>
    <div>
      <label>Gamma</label>
      <div>
        <input
          type="range"
          min="0.0"
          max="5.0"
          step="0.5"
          data-bind="value: gamma, valueUpdate: 'input'"
        />
        <input type="number" size="5" step="0.5" data-bind="value: gamma" />
      </div>
    </div>
    <div>
      <label>Brightness</label>
      <div>
        <input
          type="range"
          min="0.0"
          max="5.0"
          step="0.5"
          data-bind="value: brightness, valueUpdate: 'input'"
        />
        <input
          type="number"
          size="5"
          step="0.5"
          data-bind="value: brightness"
        />
      </div>
    </div>
    <div>
      <label>Saturation</label>
      <div>
        <input
          type="range"
          min="0.0"
          max="5.0"
          step="0.5"
          data-bind="value: saturation, valueUpdate: 'input'"
        />
        <input
          type="number"
          size="5"
          step="0.5"
          data-bind="value: saturation"
        />
      </div>
    </div>
    <div>
      <label>Ground Albedo</label>
      <div>
        <input
          type="range"
          min="0.0"
          max="1.0"
          step="0.01"
          data-bind="value: groundAlbedo, valueUpdate: 'input'"
        />
        <input
          type="number"
          step="0.01"
          size="5"
          data-bind="value: groundAlbedo"
        />
      </div>
    </div>
  </div>
  <div id="environmentToolbar"></div>
</div>
